@charset "utf-8";
.header {
    position: fixed;
    z-index: 9999;
    background: #d43d3d;
    box-sizing: border-box;
    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 46px;
        padding: 0 20px;
        .xinxi {
            width: 9%;
            img {
                width: 100%;
            }
        }
        .logo {
            width: 30%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .logo_img {
                width: 85%;
                margin: 5%;
                img {
                    width: 100%;
                }
            }
            i {
                font-size: 14px;
                color: #fff;
            }
        }
        .search {
            width: 9%;
            img {
                width: 100%;
            }
        }
    }
    .Nav_box {
        background: #f4f5f6;
        height: 38px;
        width: 100%;
        position: fixed;
        z-index: 999;
        top: 46px;
        .nav {
            white-space: nowrap;
            overflow: hidden;
            background: #f4f5f6;
            line-height: 36px;
            overflow-x: scroll;
            &::-webkit-scrollbar {
                display: none;
            }
            li {
                display: inline-block;
                font-size: 18px;
                margin: 0 3%;
                color: #505050;
            }
            .active {
                color: #f85959;
            }
        }
        .top_menu_more {
            position: relative;
            float: right;
            width: 11%;
            height: 37px;
            font-size: 30px;
            color: #f85959;
            line-height: 37px;
            text-align: center;
            .more_shadow {
                background: url(../assets/shadow.png) no-repeat center right;
                position: absolute;
                width: 10px;
                height: 36px;
                left: -10px;
                top: 0;
                background-size: contain;
                background-color: rgba(244, 245, 246, 0.3);
            }
        }
    }
    .shadow {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.5);
        .popup {
            width: 84%;
            height: 225px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -113px;
            margin-left: -135px;
            border-radius: 10px;
            .banner {
                margin-top: 10px;
                margin-left: 54px;
                width: 61%;
                height: 121px;
                background: url(../assets/头条.png) no-repeat;
                background-size: contain;
            }
            p {
                text-align: center;
                color: #a5a5a5;
                font-size: 17px;
                margin-top: 6px;
                margin-bottom: 16px;
            }
            .downBtn {
                margin-left: 25px;
                width: 82%;
                background: #ff6762;
                text-align: center;
                line-height: 40px;
                margin-top: 5px;
                margin-bottom: 15px;
                border-radius: 10px;
                text-shadow: 0px 1px 1px #f0221c;
                color: #fff;
                font-size: 20px;
            }
            .close {
                width: 14%;
                height: 32px;
                background: url(../assets/close.png) no-repeat center;
                background-size: 17px;
                position: absolute;
                right: 0px;
                top: 0px;
            }
        }
    }
    .channel {
        position: fixed;
        z-index: 9999;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #f5f5f5;
        transition: all 1s;
        transform: translateX(100%);
        .channel_title {
            width: 100%;
            height: 46px;
            background: #d43d3d;
            .quit {
                width: 14%;
                height: 46px;
                position: absolute;
                left: 0;
                top: 0;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                cursor: pointer;
                a {
                    width: 50%;
                    height: 50%;
                    background: url(../assets/quit.png) no-repeat 50%;
                    background-size: 100%;
                    display: block;
                }
            }
            .bannel_name {
                display: block;
                text-align: center;
                line-height: 46px;
                color: #fff;
                font-weight: 900;
            }
        }
        .addBtn {
            width: 100%;
            font-weight: 500;
            .Btn_title {
                display: block;
                padding: 0 10px;
                line-height: 2em;
                font-size: 12px;
                color: #666;
            }
            .warn {
                color: red;
            }
            .Btn_detail {
                margin: 10px 0;
                .Btn_list {
                    display: inline-block;
                    width: 25%;
                    margin-bottom: 10px;
                    -webkit-animation: zoomIn .3s ease;
                    animation: zoomIn .3s ease;
                    a {
                        font-size: 16px;
                        display: block;
                        margin: 0 8px;
                        border: 1px solid #ccc;
                        text-align: center;
                        line-height: 2em;
                    }
                    .tuijian {
                        background-color: #f0f0f0;
                    }
                }
            }
        }
    }
    .search1{
        position: fixed;
        z-index: 9999;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        transition: all 1s;
        transform: translateY(-100%);
        .search_title{
            width: 100%;
            height: 46px;
            background: #d43d3d;
            .quit{
                width: 14%;
                height: 46px;
                position: absolute;
                left: 0;
                top: 0;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                cursor: pointer;
                a {
                    width: 50%;
                    height: 50%;
                    background: url(../assets/quit.png) no-repeat 50%;
                    background-size: 100%;
                    display: block;
                }
            }
            .search_name{
                 display: block;
                text-align: center;
                line-height: 46px;
                color: #fff;
                font-weight: 900;
            }
        }
        .search_form{
            background: #c9c9c9;
            position: relative;
            .search_box{
                padding: 5px;
            }
            .action_toutiao{
                    display: block;
                    width: 40px;
                    height: 27px;
                    position: absolute;
                    background: url(../assets/Icons.png) #fff no-repeat 6px -37.5px;
                    background-size: 20px;
                    left: 5px
            }
            .search_input{
                    border: 0;
                    border-radius: 3px;
                    margin: 0;
                    width: 100%;
                    font-size: 16px;
                    -webkit-appearance: none;
                    padding: 5px 10px 5px 40px;
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    color: #666;
                    background: #fff;
            }
        }
        .search_content{
                display: block;
                position: relative;
                .hot_words{
                    .hotWords_list{
                            display: block;
                            transform-origin: 0px 0px 0px;
                            opacity: 1;
                            transform: scale(1, 1);
                                text-align: center;
                                li{
                                        display: inline-block;
                                        margin: 15px 5px 0;
                                        a{
                                        background: #f5f5f5;
                                        color: #363636;
                                        font-size: 15px;
                                        padding: 5px; 
                                        &:visited{
                                            color: #999;
                                        }
                                        }
                                }
                    }
                }
        }
    }
    .move {
        transform: translate(0);
    }
}